<template>
  <el-container>
    <el-main>
      <div class="search-pop clearfix content-border">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div class="grid-content pd-main pb20">
              <div class="bg-w">
                <el-row type="flex" justify="center">
                  <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="24">
                    <div class="grid-content pd-main pd-content">
                      <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                          <div class="grid-content">
                            <h2 class="h2"><span>我的项目</span></h2>
                          </div>
                          <div class="c-search" >
                              <el-input
                                      prefix-icon="el-icon-search"
                                      v-model="searchInfo.search_key"
                                      placeholder="请输入项目名字搜索"
                                      clearable
                                      @keyup.enter.native="handleQuery"
                              />
                          </div>

                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="pc-height">
                <el-row type="flex" justify="center">
                  <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="23">
                    <div class="grid-content">
                      <!--项目列表-->
                      <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="(item,index) in tableData"
                                :key="index">
                          <div class="grid-content market">
                            <el-row>
                              <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                                <div class="grid-content">
                                  <h1 :title="'点击进入' + item.project_fullname" class="market-logo"
                                      :style="'background-color:'+colors[index%5]"><span
                                          @click="JumpRouter(item.project_code)">{{item.project_fullname.substring(0,1)}}</span>
                                  </h1>
                                </div>
                              </el-col>
                              <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
                                <div class="grid-content link">
                                  <h2 :title="'点击进入' + item.project_fullname" @click="JumpRouter(item.project_code)">
                                    {{item.project_fullname}}</h2>
                                </div>
                              </el-col>

                            </el-row>
                          </div>
                        </el-col>
                      </el-row>
                      <div class="mt30" style="text-align: right">
                        <el-pagination
                                :current-page="page"
                                :page-size="pageSize"
                                :page-sizes="[12, 24, 48, 96]"
                                :style="{float:'right',padding:'20px'}"
                                :total="total"
                                @current-change="handleCurrentChange"
                                @size-change="handleSizeChange"
                                layout="total, sizes, prev, pager, next, jumper"
                        ></el-pagination>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import {
    getAppProjectAuthList,
  } from "@/api/deploy_app";
  import infoList from '@/mixins/infoList'

  export default {
    name: "index",
    mixins: [infoList],
    data() {
      return {
        listApi: getAppProjectAuthList,
        searchInfo: {},
        // projects: [],
        content: {},
        colors: ['#FF0000', '#FF9933', '#0033FF', '#CC0099', '#C0C0C0', '#00FFFF'],
      }
    },
    async created() {
      await this.getProjects();

    },
    methods: {
      // 搜索
      handleQuery() {
        this.getProjects()
      },
      //页面跳转
      JumpRouter(projectCode) {
        this.$router.push({path: 'apply', query: {projectCode: projectCode}})
      },

      //  获取侧边树结构
      async getProjects() {
        const res = this.getProjectAuthList()
        // const {code, data} = await getAppProjectAuthList({
        //   'authorityId': res.authorityId,
        //   'projectCasbinInfos': res.projectCasbinInfos,
        //   'page': 1,
        //   'pageSize': 10
        // })
        this.pageSize = 12
        this.searchInfo.authorityId = res.authorityId
        this.searchInfo.projectCasbinInfos = res.projectCasbinInfos

        // if (code != '0') return
        // // this.projects = data.list
        // //
        await this.getTableData();

      }
    },
  }
</script>

<style scoped lang='scss'>
  /*@import "../../../style/common.css";*/
  .market {
    box-shadow: 0 0 10px 0 rgba(122, 177, 249, 0.34);
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;

    .market-logo {
      width: 80px;
      /*background-color: #00bfbf;*/
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 40px auto;
      border-radius: 50%;

      span {
        color: white;
        font-family: monospace;
        font-weight: bold;
        font-size: 35px;
      }
    }
  }

  .pd-content {
    padding: 12px 0px;

    .h2 span {
      border-bottom: 3px solid #7ab1f9;
      padding: 10px 0;
    }
  }

  .link {
    padding: 20px;
    min-height: 120px;

    h2 {
      font-size: 20px;
      color: #666;
      line-height: 110px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;

      &:hover {
        color: #7AB1F9;
      }
    }

    span {
      font-size: 14px;
      color: #666;
      padding-top: 20px;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .button {
      position: absolute;
      right: 16px;
      bottom: -5px;

      i {
        font-size: 24px;
        color: #666;

        &:hover {
          color: #7AB1F9;
        }
      }
    }
  }

  .c-search {
    position: relative;
    float: right;
    margin-top: -10px;


  }
</style>
